<!-- Created by henian.xu on 2018/11/9. -->

<template>
    <Page>
        <div
            class="banner-swiper"
            v-swiper:bannerSwiper="bannerSwiperOption">
            <div class="swiper-wrapper">
                <Linker
                    :to="banner.address"
                    ssr
                    tag="div"
                    class="swiper-slide"
                    v-for="(banner,index) in info.gysrz_bannerlbt"
                    :key="index"
                    :style="`background-image: url('${banner.image}');`">
                    <!--<img :src="banner">-->
                </Linker>
            </div>
            <div class="swiper-pagination swiper-pagination-bullets"/>
        </div>

        <div class="container">
            <div class="row no-spacing">
                <div
                    class="col-24"
                    style="line-height: 0;">
                    <Linker
                        v-for="(item,index) in info.sy_gysrztj"
                        :key="index"
                        :to="item.address"
                        ssr>
                        <img
                            :src="item.image || $defaultImg"
                            width="100%">
                    </Linker>
                    <Linker
                        to="/"
                        ssr>
                        <img
                            v-for="(item,index) in info.sy_gysptys"
                            :key="index"
                            :src="item.image || $defaultImg"
                            width="100%">
                    </Linker>
                </div>
            </div>
        </div>

        <div class="container">
            <Panel label="成功案例">
                <div class="row nma-t nma-b">
                    <Linker
                        to="/"
                        ssr
                        tag="div"
                        class="col-6"
                        v-for="(data,index) in info.gysrz_cgalid"
                        :key="index">
                        <div class="case-item">
                            <div class="inner">
                                <div class="img-obj">
                                    <div
                                        class="inner"
                                        :style="`background-image: url('${data.titleImage}');`"/>
                                </div>
                                <div class="content">
                                    <div class="label">{{ data.title }}</div>
                                    <div class="desc">{{ data.subtitle }}</div>
                                </div>
                            </div>
                        </div>
                    </Linker>
                </div>
                <div
                    class="footer ta-c"
                    slot="footer"><a href="javascript:;">查看更多</a></div>
            </Panel>
            <div
                class="ta-c"
                style="padding: 60px 0;">
                <Linker
                    to="/register/supplier"
                    ssr
                    class="btn btn-main btn-big btn-entering">立即入驻</Linker>
                <a
                    class="btn btn-big contact-qq"
                    target="_blank"
                    href="http://wpa.qq.com/msgrd?v=3&uin=2818008118&site=qq&menu=yes">
                    <!--<img
                        border="0"
                        src="http://wpa.qq.com/pa?p=2:2818008118:51"
                        alt="点击这里给我发消息"
                        title="点击这里给我发消息">-->
                    联系客服
                </a>
            </div>
        </div>
    </Page>
</template>

<script>
import PageMixin from '~/mixins/page.js';
export default {
    mixins: [PageMixin],
    /*asyncData({ app }) {
        return app.$axios.get('/rpc/comm/rs/region/getChild').then(json => {
            const result = json.data.data;
            return { result };
        });
    },*/
    data() {
        return {
            bannerSwiperOption: {
                loop: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 30,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                },
            },
            info: {
                // 供应商入驻_Banner轮播图
                gysrz_bannerlbt: [],
                sy_gysrztj: [],
                sy_gysptys: [],
                // 成功案例文章
                gysrz_cgalid: [],
            },
        };
    },
    methods: {
        getPortalInfoValue() {
            this.$axios
                .get('/rpc/comm/pt/portalInfoConfig/getPortalInfoValue', {
                    keys: 'gysrz_bannerlbt,gysrz_cgalid,sy_gysrztj,sy_gysptys',
                })
                .then(json => {
                    const result = json.data.data;
                    this.info.gysrz_bannerlbt = result.gysrz_bannerlbt.data;
                    this.info.sy_gysrztj = result.sy_gysrztj.data;
                    this.info.sy_gysptys = result.sy_gysptys.data;
                    this.findCmsArticleList(result.gysrz_cgalid.text).then(reslut => {
                        this.info.gysrz_cgalid = reslut;
                    });
                });
        },
        findCmsArticleList(id) {
            return this.$axios
                .get('/rpc/buyer/pt/cms/findCmsArticleList', {
                    id: id,
                })
                .then(json => Promise.resolve(json.data.data));
        },
    },
    mounted() {
        this.getPortalInfoValue();
    },
};
</script>

<style lang="scss" scoped>
@import '~/assets/style/_index.scss';
.banner-swiper {
    min-width: $page-min-width;
    .swiper-slide {
        height: 400px;
        background: transparent center no-repeat;
        background-size: cover;
    }
}

.btn-entering,
.contact-qq {
    line-height: 50px;
    min-width: 200px;
}

.contact-qq {
    border: 1px solid $color-main;
    color: $color-main;
    background-color: transparent;
    margin-left: $margin;
}
</style>
